<!--
  智慧社区管理系统 - 物业信息管理
  @author Wu.Liang
  @date 2025-06-29
  @description 物业信息查看和编辑页面
-->
<template>
  <div class="property-info-container">
    <!-- 物业公司选择器（当用户关联多个物业公司时显示） -->
    <div v-if="userStore.companyList.length > 1" class="company-selector">
      <div class="company-selector-content">
        <el-radio-group v-model="userStore.currentCompanyId" @change="handleCompanyChange">
          <el-radio 
            v-for="company in userStore.companyList" 
            :key="company.id" 
            :value="company.id"
            class="company-radio"
          >
            <div class="company-radio-content">
              <div class="company-main-info">
                <span class="company-name">{{ company.name }}</span>
                <span class="company-id">(ID: {{ company.id }})</span>
              </div>
              <div class="company-info">
                <span v-if="company.position" class="company-position">职位: {{ company.position }}</span>
                <span v-if="company.department" class="company-department">部门: {{ company.department }}</span>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="page-actions">
        <el-button 
          v-if="canEdit && !isEditing" 
          type="primary" 
          @click="handleEdit"
          :loading="loading"
        >
          <el-icon><Edit /></el-icon>
          编辑信息
        </el-button>
        <el-button 
          v-if="isEditing" 
          type="success" 
          @click="handleSave"
          :loading="saving"
        >
          <el-icon><Check /></el-icon>
          保存
        </el-button>
        <el-button 
          v-if="isEditing" 
          @click="handleCancel"
        >
          <el-icon><Close /></el-icon>
          取消
        </el-button>
        <el-button 
          type="info" 
          @click="handleRefresh"
          :loading="loading"
        >
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
      

    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="6" animated />
    </div>

    <!-- 主要内容区域 -->
    <div v-else class="content-container">
      <!-- 没有关联物业公司的提示 -->
      <NoPropertyCompany 
        v-if="hasPropertyCompany === false" 
        title="暂未关联物业公司"
        description="当前用户暂未关联任何物业公司，无法查看和编辑物业信息。"
        icon="Warning"
        :show-contact-tip="true"
        :show-actions="true"
        :show-refresh-button="true"
        :show-contact-button="true"
        refresh-button-text="重新检查"
        contact-button-text="联系管理员"
        @refresh="handleRefresh"
        @contact="handleContactAdmin"
      />

      <!-- 物业信息详情 -->
      <div v-else-if="hasPropertyCompany === true" class="property-info-content">
        
        <!-- 基本信息卡片 -->
        <el-card v-if="propertyInfo" class="info-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span class="card-title">基本信息</span>
              <el-tag v-if="propertyInfo?.status === 1" type="success">正常</el-tag>
              <el-tag v-else type="danger">停用</el-tag>
            </div>
          </template>
          
          <el-row :gutter="24">
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">物业公司：</label>
                <span class="info-value">{{ propertyInfo?.companyName || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">公司代码：</label>
                <span class="info-value">{{ propertyInfo?.companyCode || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">统一社会信用代码：</label>
                <span class="info-value">{{ propertyInfo?.creditCode || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">营业执照号：</label>
                <span class="info-value">{{ propertyInfo?.businessLicense || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">法定代表人：</label>
                <span class="info-value">{{ propertyInfo?.legalRepresentative || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">成立日期：</label>
                <span class="info-value">{{ propertyInfo?.establishedDate || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">注册资本：</label>
                <span class="info-value">{{ propertyInfo?.registeredCapital ? `${propertyInfo.registeredCapital}万元` : '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">资质等级：</label>
                <span class="info-value">{{ propertyInfo?.qualificationLevel || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">联系人：</label>
                <span class="info-value">{{ propertyInfo?.contactPerson || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">联系电话：</label>
                <span class="info-value">{{ propertyInfo?.contactPhone || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">联系邮箱：</label>
                <span class="info-value">{{ propertyInfo?.contactEmail || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">邮箱地址：</label>
                <span class="info-value">{{ propertyInfo?.email || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">营业时间：</label>
                <span class="info-value">{{ propertyInfo?.businessHours || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">服务热线：</label>
                <span class="info-value">{{ propertyInfo?.serviceHotline || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">收款账户：</label>
                <span class="info-value">{{ propertyInfo?.paymentAccount || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">开户银行：</label>
                <span class="info-value">{{ propertyInfo?.paymentBank || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">微信支付商户号：</label>
                <span class="info-value">{{ propertyInfo?.wechatPayMerchantId || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">支付宝商户号：</label>
                <span class="info-value">{{ propertyInfo?.alipayMerchantId || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">在线支付链接：</label>
                <span class="info-value">
                  <el-link 
                    v-if="propertyInfo?.paymentLink" 
                    :href="propertyInfo.paymentLink" 
                    target="_blank" 
                    type="primary"
                  >
                    {{ propertyInfo.paymentLink }}
                  </el-link>
                  <span v-else>-</span>
                </span>
              </div>
            </el-col>
          </el-row>
          
          <!-- 地址信息 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :span="24">
              <div class="info-item">
                <label class="info-label">公司地址：</label>
                <span class="info-value">{{ propertyInfo?.address || '-' }}</span>
              </div>
            </el-col>
          </el-row>
          
          <!-- 服务范围 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :span="24">
              <div class="info-item">
                <label class="info-label">服务范围：</label>
                <div class="info-value introduction-text">{{ propertyInfo?.serviceScope || '-' }}</div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 服务信息 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">服务区域：</label>
                <span class="info-value">{{ propertyInfo?.serviceArea || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">服务社区数：</label>
                <span class="info-value">{{ propertyInfo?.serviceCommunityCount || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">服务户数：</label>
                <span class="info-value">{{ propertyInfo?.serviceHouseholdCount || '-' }}</span>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6">
              <div class="info-item">
                <label class="info-label">服务面积：</label>
                <span class="info-value">{{ propertyInfo?.serviceAreaSize ? `${propertyInfo.serviceAreaSize}㎡` : '-' }}</span>
              </div>
            </el-col>
          </el-row>
          
          <!-- 公司介绍 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :span="24">
              <div class="info-item">
                <label class="info-label">公司介绍：</label>
                <div class="info-value introduction-text">{{ propertyInfo?.introduction || '-' }}</div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 公司描述 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :span="24">
              <div class="info-item">
                <label class="info-label">公司描述：</label>
                <div class="info-value introduction-text">{{ propertyInfo?.description || '-' }}</div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 备注信息 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :span="24">
              <div class="info-item">
                <label class="info-label">备注：</label>
                <div class="info-value introduction-text">{{ propertyInfo?.remark || '-' }}</div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 图片信息 -->
          <el-row :gutter="24" style="margin-top: 20px;">
            <el-col :span="12">
              <div class="info-item">
                <label class="info-label">公司Logo：</label>
                <div class="info-value">
                  <WebImageDisplay
                    :images="getCompanyLogoFiles()"
                    display-mode="grid"
                    :max-display-count="6"
                    :show-image-info="true"
                    empty-text="暂无公司Logo"
                    @image-click="handleLogoClick"
                    @error="handleImageError"
                    @load="handleImageLoad"
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <label class="info-label">收款二维码：</label>
                <div class="info-value">
                  <WebImageDisplay
                    :images="getPaymentQrCodeFiles()"
                    display-mode="grid"
                    :max-display-count="6"
                    :show-image-info="true"
                    empty-text="暂无收款二维码"
                    @image-click="handleQrClick"
                    @error="handleImageError"
                    @load="handleImageLoad"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 编辑表单 -->
        <el-card v-if="isEditing && propertyInfo" class="edit-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span class="card-title">编辑物业信息</span>
            </div>
          </template>
          
          <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            label-width="120px"
            @submit.prevent="handleSave"
          >
            <!-- 基本信息 -->
            <div class="form-section">
              <h3 class="section-title">基本信息</h3>
              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="公司名称" prop="companyName">
                    <el-input
                      v-model="formData.companyName"
                      placeholder="请输入公司名称"
                      clearable
                      maxlength="100"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="公司编码" prop="companyCode">
                    <el-input
                      v-model="formData.companyCode"
                      placeholder="公司编码"
                      clearable
                      maxlength="50"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="物业公司ID" prop="propertyCompanyId">
                    <el-input
                      v-model="formData.propertyCompanyId"
                      placeholder="物业公司ID"
                      clearable
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="统一社会信用代码" prop="creditCode">
                    <el-input
                      v-model="formData.creditCode"
                      placeholder="请输入统一社会信用代码"
                      clearable
                      maxlength="18"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="营业执照号" prop="businessLicense">
                    <el-input
                      v-model="formData.businessLicense"
                      placeholder="请输入营业执照号"
                      clearable
                      maxlength="50"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="法定代表人" prop="legalRepresentative">
                    <el-input
                      v-model="formData.legalRepresentative"
                      placeholder="请输入法定代表人"
                      clearable
                      maxlength="50"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="成立日期" prop="establishedDate">
                    <el-date-picker
                      v-model="formData.establishedDate"
                      type="date"
                      placeholder="请选择成立日期"
                      style="width: 100%"
                      value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="注册资本(万元)" prop="registeredCapital">
                    <el-input-number
                      v-model="formData.registeredCapital"
                      :min="0"
                      :precision="2"
                      placeholder="请输入注册资本"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="资质等级" prop="qualificationLevel">
                    <el-select
                      v-model="formData.qualificationLevel"
                      placeholder="请选择资质等级"
                      style="width: 100%"
                    >
                      <el-option label="一级" value="一级" />
                      <el-option label="二级" value="二级" />
                      <el-option label="三级" value="三级" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="公司地址" prop="address">
                    <el-input
                      v-model="formData.address"
                      placeholder="请输入公司地址"
                      clearable
                      maxlength="200"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="服务范围" prop="serviceScope">
                <el-input
                  v-model="formData.serviceScope"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入服务范围"
                  maxlength="500"
                  show-word-limit
                />
              </el-form-item>
            </div>

            <!-- 联系信息 -->
            <div class="form-section">
              <h3 class="section-title">联系信息</h3>
              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="联系人" prop="contactPerson">
                    <el-input
                      v-model="formData.contactPerson"
                      placeholder="请输入联系人姓名"
                      clearable
                      maxlength="50"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="联系电话" prop="contactPhone">
                    <el-input
                      v-model="formData.contactPhone"
                      placeholder="请输入联系电话"
                      clearable
                      maxlength="20"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="联系邮箱" prop="contactEmail">
                    <el-input
                      v-model="formData.contactEmail"
                      placeholder="请输入联系邮箱"
                      clearable
                      maxlength="100"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="邮箱地址" prop="email">
                    <el-input
                      v-model="formData.email"
                      placeholder="请输入邮箱地址"
                      clearable
                      maxlength="100"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="营业时间" prop="businessHours">
                    <el-input
                      v-model="formData.businessHours"
                      placeholder="请输入营业时间"
                      clearable
                      maxlength="100"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="服务热线" prop="serviceHotline">
                    <el-input
                      v-model="formData.serviceHotline"
                      placeholder="请输入服务热线"
                      clearable
                      maxlength="20"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 服务信息 -->
            <div class="form-section">
              <h3 class="section-title">服务信息</h3>
              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="服务范围" prop="serviceScope">
                    <el-input
                      v-model="formData.serviceScope"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入服务范围"
                      maxlength="500"
                      show-word-limit
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="服务区域" prop="serviceArea">
                    <el-input
                      v-model="formData.serviceArea"
                      placeholder="请输入服务区域"
                      clearable
                      maxlength="200"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="服务社区数" prop="serviceCommunityCount">
                    <el-input-number
                      v-model="formData.serviceCommunityCount"
                      :min="0"
                      placeholder="请输入服务社区数"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="服务户数" prop="serviceHouseholdCount">
                    <el-input-number
                      v-model="formData.serviceHouseholdCount"
                      :min="0"
                      placeholder="请输入服务户数"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="服务面积(㎡)" prop="serviceAreaSize">
                    <el-input-number
                      v-model="formData.serviceAreaSize"
                      :min="0"
                      placeholder="请输入服务面积"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 支付信息 -->
            <div class="form-section">
              <h3 class="section-title">支付信息</h3>
              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="收款账户" prop="paymentAccount">
                    <el-input
                      v-model="formData.paymentAccount"
                      placeholder="请输入收款账户"
                      clearable
                      maxlength="100"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="开户银行" prop="paymentBank">
                    <el-input
                      v-model="formData.paymentBank"
                      placeholder="请输入开户银行"
                      clearable
                      maxlength="100"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="在线支付链接" prop="paymentLink">
                    <el-input
                      v-model="formData.paymentLink"
                      placeholder="请输入在线支付链接"
                      clearable
                      maxlength="500"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="微信支付商户号" prop="wechatPayMerchantId">
                    <el-input
                      v-model="formData.wechatPayMerchantId"
                      placeholder="请输入微信支付商户号"
                      clearable
                      maxlength="50"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8">
                  <el-form-item label="支付宝商户号" prop="alipayMerchantId">
                    <el-input
                      v-model="formData.alipayMerchantId"
                      placeholder="请输入支付宝商户号"
                      clearable
                      maxlength="50"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 图片信息 -->
            <div class="form-section">
              <h3 class="section-title">图片信息</h3>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="公司Logo" prop="companyLogo">
                    <ImageUpload
                      v-model="companyLogoFiles"
                      :upload-type="'COMPANY_LOGO'"
                      :upload-source="'WEB'"
                      :multiple="false"
                      :max-size="10"
                      :allowed-types="['jpg', 'jpeg', 'png']"
                      tip="请上传公司Logo图片，支持jpg、jpeg、png格式，最大10MB，只能上传一个文件"
                      @on-success="handleCompanyLogoSuccess"
                      @on-error="handleUploadError"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收款二维码" prop="paymentQrCode">
                    <ImageUpload
                      v-model="paymentQrCodeFiles"
                      :upload-type="'PAYMENT_QR'"
                      :upload-source="'WEB'"
                      :multiple="false"
                      :max-size="10"
                      :allowed-types="['jpg', 'jpeg', 'png']"
                      tip="请上传收款二维码图片，支持jpg、jpeg、png格式，最大10MB，只能上传一个文件"
                      @on-success="handlePaymentQrCodeSuccess"
                      @on-error="handleUploadError"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <!-- 描述信息 -->
            <div class="form-section">
              <h3 class="section-title">描述信息</h3>
              <el-form-item label="公司简介" prop="introduction">
                <el-input
                  v-model="formData.introduction"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入公司简介"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="公司描述" prop="description">
                <el-input
                  v-model="formData.description"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入公司描述"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="formData.remark"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注信息"
                  maxlength="500"
                  show-word-limit
                />
              </el-form-item>
            </div>

            <!-- 操作按钮 -->
            <div class="form-actions">
              <el-button type="primary" @click="handleSave" :loading="saving">
                <el-icon><Check /></el-icon>
                保存
              </el-button>
              <el-button @click="handleCancel">
                <el-icon><Close /></el-icon>
                取消
              </el-button>
            </div>
          </el-form>
        </el-card>

        <!-- 统计信息卡片 -->
        <el-card v-if="propertyInfo" class="stats-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span class="card-title">统计信息</span>
            </div>
          </template>
          
          <el-row :gutter="24">
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">{{ propertyStats?.totalServiceArea ? `${propertyStats.totalServiceArea}㎡` : '-' }}</div>
                <div class="stat-label">总服务面积</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">{{ propertyStats?.serviceCommunityCount || 0 }}</div>
                <div class="stat-label">服务社区</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">{{ propertyStats?.serviceHouseholdCount || 0 }}</div>
                <div class="stat-label">服务户数</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">{{ propertyStats?.averageServiceQuality || 0 }}%</div>
                <div class="stat-label">服务质量</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">¥{{ formatMoney(propertyStats?.monthlyIncome || 0) }}</div>
                <div class="stat-label">月收入</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">¥{{ formatMoney(propertyStats?.monthlyExpense || 0) }}</div>
                <div class="stat-label">月支出</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">{{ propertyStats?.profitRate || 0 }}%</div>
                <div class="stat-label">利润率</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="6" :md="3">
              <div class="stat-item">
                <div class="stat-value">{{ propertyInfo?.qualificationLevel || '-' }}</div>
                <div class="stat-label">资质等级</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 操作日志 -->
        <el-card v-if="propertyInfo" class="log-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span class="card-title">操作日志</span>
            </div>
          </template>
          
          <div class="log-content">
            <div v-if="operationLogs?.length" class="log-list">
              <div 
                v-for="log in operationLogs" 
                :key="log.id" 
                class="log-item"
              >
                <div class="log-time">{{ formatDateTime(log.createTime) }}</div>
                <div class="log-action">{{ log.action }}</div>
                <div class="log-user">{{ log.userName }}</div>
                <div class="log-detail">{{ log.detail }}</div>
              </div>
            </div>
            <el-empty v-else description="暂无操作日志" />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 物业信息管理页面
 * @author Wu.Liang
 * @date 2025-06-29
 */

import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Edit, Check, Close, Refresh, Warning, Picture } from '@element-plus/icons-vue'
import { propertyInfoApi } from '@/api/property/propertyInfo'
import type { 
  PropertyInfo, 
  PropertyInfoUpdateData, 
  PropertyInfoStats 
} from '@/types/property'
import { useUserStore } from '@/store/user'
import { showSuccess, showError, showWarning, showInfo } from '@/utils/message'
import FileUpload from '@/components/FileUpload.vue' // 引入文件上传组件
import WebImageDisplay from '@/components/WebImageDisplay.vue' // 引入图片展示组件
import ImageUpload from '@/components/ImageUpload.vue' // 引入图片上传组件
import type { ImageInfo } from '@/components/WebImageDisplay.vue' // 引入图片信息类型
import NoPropertyCompany from '@/components/NoPropertyCompany/index.vue' // 引入无物业公司提示组件

// ==================== 响应式数据 ====================

// 用户store
const userStore = useUserStore()

// 页面状态
const loading = ref(false)
const saving = ref(false)
const isEditing = ref(false)
const hasPropertyCompany = ref<boolean | null>(null) // 修改为null，表示未初始化状态

// 初始化权限信息，防止未定义报错
const userPermissionInfo = ref({
  isSuperAdmin: false,
  hasPropertyCompany: false,
  propertyCompanyId: null as number | null,
  propertyCompanyName: ''
})

// 加载用户权限信息
const loadUserPermissionInfo = async () => {
  try {
    const permission = await userStore.getUserDataScope()
    // 整体对象赋值，避免响应式丢失
    userPermissionInfo.value = {
      isSuperAdmin: permission.isSuperAdmin,
      hasPropertyCompany: permission.hasPropertyCompany,
      propertyCompanyId: permission.companyId,
      propertyCompanyName: permission.companyName
    }
    console.log('权限信息加载完成:', userPermissionInfo.value)
  } catch (error) {
    console.error('加载权限信息失败:', error)
    userPermissionInfo.value = {
      isSuperAdmin: false,
      hasPropertyCompany: false,
      propertyCompanyId: null,
      propertyCompanyName: ''
    }
  }
}

// 表单相关
const formRef = ref<FormInstance>()
const formData = reactive<PropertyInfoUpdateData>({
  // 基本信息
  companyName: '',
  companyCode: '',
  propertyCompanyId: undefined,
  creditCode: '',
  businessLicense: '',
  legalRepresentative: '',
  establishedDate: '',
  registeredCapital: undefined,
  qualificationLevel: '',
  
  // 联系信息
  contactPerson: '',
  contactPhone: '',
  contactEmail: '',
  email: '',
  address: '',
  businessHours: '',
  serviceHotline: '',
  
  // 服务信息
  serviceScope: '',
  serviceArea: '',
  serviceCommunityCount: undefined,
  serviceHouseholdCount: undefined,
  serviceAreaSize: undefined,
  
  
  // 支付信息
  paymentAccount: '',
  paymentBank: '',
  paymentLink: '',
  wechatPayMerchantId: '',
  alipayMerchantId: '',
  
  // 图片信息 - 移除，使用独立的文件数组
  
  // 描述信息
  introduction: '',
  description: '',
  remark: ''
})

// 表单验证规则
const formRules: FormRules = {
  companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { min: 2, max: 100, message: '公司名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  companyCode: [
    { required: true, message: '请输入公司编码', trigger: 'blur' },
    { min: 2, max: 50, message: '公司编码长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  creditCode: [
    { pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: '请输入正确的统一社会信用代码', trigger: 'blur' }
  ],
  businessLicense: [
    { max: 50, message: '营业执照号长度不能超过50个字符', trigger: 'blur' }
  ],
  legalRepresentative: [
    { max: 50, message: '法定代表人姓名长度不能超过50个字符', trigger: 'blur' }
  ],
  establishedDate: [
    { message: '请选择正确的成立日期', trigger: 'change' }
  ],
  registeredCapital: [
    { type: 'number', min: 0, message: '注册资本不能小于0', trigger: 'blur' }
  ],
  qualificationLevel: [
    { required: true, message: '请选择资质等级', trigger: 'change' }
  ],
  contactPerson: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
    { min: 2, max: 50, message: '联系人姓名长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  contactEmail: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  address: [
    { max: 200, message: '公司地址长度不能超过200个字符', trigger: 'blur' }
  ],
  businessHours: [
    { max: 100, message: '营业时间长度不能超过100个字符', trigger: 'blur' }
  ],
  serviceHotline: [
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的服务热线', trigger: 'blur' }
  ],
  serviceScope: [
    { max: 500, message: '服务范围长度不能超过500个字符', trigger: 'blur' }
  ],
  serviceArea: [
    { max: 200, message: '服务区域长度不能超过200个字符', trigger: 'blur' }
  ],
  serviceCommunityCount: [
    { type: 'number', min: 0, message: '服务社区数不能小于0', trigger: 'blur' }
  ],
  serviceHouseholdCount: [
    { type: 'number', min: 0, message: '服务户数不能小于0', trigger: 'blur' }
  ],
  serviceAreaSize: [
    { type: 'number', min: 0, message: '服务面积不能小于0', trigger: 'blur' }
  ],

  paymentAccount: [
    { max: 100, message: '收款账户长度不能超过100个字符', trigger: 'blur' }
  ],
  paymentBank: [
    { max: 100, message: '开户银行长度不能超过100个字符', trigger: 'blur' }
  ],
  paymentLink: [
    { type: 'url', message: '请输入正确的在线支付链接', trigger: 'blur' }
  ],
  wechatPayMerchantId: [
    { max: 50, message: '微信支付商户号长度不能超过50个字符', trigger: 'blur' }
  ],
  alipayMerchantId: [
    { max: 50, message: '支付宝商户号长度不能超过50个字符', trigger: 'blur' }
  ],
  introduction: [
    { max: 1000, message: '公司简介长度不能超过1000个字符', trigger: 'blur' }
  ],
  description: [
    { max: 1000, message: '公司描述长度不能超过1000个字符', trigger: 'blur' }
  ],
  remark: [
    { max: 500, message: '备注长度不能超过500个字符', trigger: 'blur' }
  ]
}

// 数据
const propertyInfo = ref<PropertyInfo>()
const propertyStats = ref<PropertyInfoStats>()
const operationLogs = ref<any[]>([])

// 图片上传相关
const companyLogoFiles = ref<ImageInfo[]>([])
const paymentQrCodeFiles = ref<ImageInfo[]>([])

// ==================== 计算属性 ====================

// 是否有查看权限 - 只判断是否关联物业公司
const canView = computed(() => {
  return hasPropertyCompany.value === true
})

// 是否有编辑权限 - 只判断是否关联物业公司
const canEdit = computed(() => {
  return hasPropertyCompany.value === true
})

// 图片点击事件处理
const handleLogoClick = (image: ImageInfo, index: number) => {
  console.log('公司Logo点击:', image, index)
}

const handleQrClick = (image: ImageInfo, index: number) => {
  console.log('收款二维码点击:', image, index)
}

// 图片错误事件处理
const handleImageError = (data: { index?: number; image?: ImageInfo; error: any }) => {
  console.error('图片错误事件:', data)
}

// 图片加载事件处理
const handleImageLoad = (data: { event: any }) => {
  console.log('图片加载事件:', data)
}

// 计算属性：动态调整图片显示数量
const companyLogoDisplayCount = computed(() => {
  const logoFiles = getCompanyLogoFiles()
  return logoFiles.length > 0 ? logoFiles.length : 0
})

const paymentQrDisplayCount = computed(() => {
  const qrFiles = getPaymentQrCodeFiles()
  return qrFiles.length > 0 ? qrFiles.length : 0
})

// ==================== 方法定义 ====================

/**
 * 解析公司Logo文件信息
 */
const getCompanyLogoFiles = () => {
  if (!propertyInfo.value?.companyLogo) {
    return []
  }
  
  try {
    const logoFiles = JSON.parse(propertyInfo.value.companyLogo)
    if (Array.isArray(logoFiles)) {
      return logoFiles
    }
  } catch (e) {
    console.warn('解析公司Logo JSON数据失败:', e)
  }
  
  return []
}

/**
 * 解析收款二维码文件信息
 */
const getPaymentQrCodeFiles = () => {
  if (!propertyInfo.value?.paymentQrCode) {
    return []
  }
  
  try {
    const qrFiles = JSON.parse(propertyInfo.value.paymentQrCode)
    if (Array.isArray(qrFiles)) {
      return qrFiles
    }
  } catch (e) {
    console.warn('解析收款二维码 JSON数据失败:', e)
  }
  
  return []
}

/**
 * 初始化页面数据
 */
const initPageData = async () => {
  try {
    loading.value = true
    console.log('物业信息页面：开始初始化页面数据')
    
    // 每次都调用API检查用户是否关联物业公司，确保数据准确性
    console.log('调用API检查用户是否关联物业公司')
    const hasCompanyRes = await propertyInfoApi.hasPropertyCompany()
    hasPropertyCompany.value = hasCompanyRes.data || false
    
    console.log('物业信息页面：用户关联物业公司状态:', hasPropertyCompany.value)
    
    if (hasPropertyCompany.value) {
      // 有关联物业公司，更新store中的公司信息并加载数据
      await userStore.checkAndUpdateCompanyInfo()
      await loadPropertyInfo() // 显示关联的公司详情
      await loadPropertyStats()
      await loadOperationLogs()
    } else {
      // 没有关联物业公司，清除store中的公司信息
      userStore.clearCompanyInfo()
      console.log('物业信息页面：用户未关联物业公司，显示无关联提示页面')
    }
  } catch (error) {
    console.error('初始化页面数据失败:', error)
    // 发生错误时，设置为false，避免页面卡在加载状态
    hasPropertyCompany.value = false
    showError('页面数据加载失败，请刷新重试')
  } finally {
    loading.value = false
  }
}

/**
 * 加载物业信息
 */
const loadPropertyInfo = async () => {
  try {
    // 根据当前选中的物业公司ID加载信息
    const currentCompanyId = userStore.currentCompanyId
    console.log('加载物业信息，当前物业公司ID:', currentCompanyId)
    
    const res = await propertyInfoApi.getPropertyInfo(currentCompanyId)
    
    if (res.code === 200 && res.data) {
      propertyInfo.value = res.data
      // 初始化表单数据
      initFormData()
    } else {
      console.warn('物业信息API返回异常:', res)
      showWarning('物业信息数据异常，请检查数据完整性')
      // 设置propertyInfo为null，表示数据加载失败
      propertyInfo.value = null
    }
  } catch (error) {
    console.error('加载物业信息失败:', error)
    showError('物业信息加载失败')
    // 设置propertyInfo为null，表示数据加载失败
    propertyInfo.value = null
  }
}

/**
 * 加载统计信息
 */
const loadPropertyStats = async () => {
  try {
    // 根据当前选中的物业公司ID加载统计信息
    const currentCompanyId = userStore.currentCompanyId
    console.log('加载统计信息，当前物业公司ID:', currentCompanyId)
    
    const res = await propertyInfoApi.getPropertyInfoStats(currentCompanyId)
    if (res.code === 200 && res.data) {
      propertyStats.value = res.data
    }
  } catch (error) {
    console.error('加载统计信息失败:', error)
  }
}

/**
 * 加载操作日志
 */
const loadOperationLogs = async () => {
  try {
    // 这里应该调用操作日志API，暂时使用模拟数据
    operationLogs.value = [
      {
        id: 1,
        action: '更新物业信息',
        userName: 'admin',
        detail: '更新了联系人和联系电话',
        createTime: new Date().toISOString()
      }
    ]
  } catch (error) {
    console.error('加载操作日志失败:', error)
  }
}

/**
 * 初始化表单数据
 */
const initFormData = () => {
  if (propertyInfo.value) {
    // 基本信息
    formData.companyName = propertyInfo.value.companyName || ''
    formData.companyCode = propertyInfo.value.companyCode || ''
    formData.propertyCompanyId = propertyInfo.value.propertyCompanyId || undefined
    formData.creditCode = propertyInfo.value.creditCode || ''
    formData.businessLicense = propertyInfo.value.businessLicense || ''
    formData.legalRepresentative = propertyInfo.value.legalRepresentative || ''
    formData.establishedDate = propertyInfo.value.establishedDate || ''
    formData.registeredCapital = propertyInfo.value.registeredCapital || undefined
    formData.qualificationLevel = propertyInfo.value.qualificationLevel || ''
    
    // 联系信息
    formData.contactPerson = propertyInfo.value.contactPerson || ''
    formData.contactPhone = propertyInfo.value.contactPhone || ''
    formData.contactEmail = propertyInfo.value.contactEmail || ''
    formData.email = propertyInfo.value.email || ''
    formData.address = propertyInfo.value.address || ''
    formData.businessHours = propertyInfo.value.businessHours || ''
    formData.serviceHotline = propertyInfo.value.serviceHotline || ''
    
    // 服务信息
    formData.serviceScope = propertyInfo.value.serviceScope || ''
    formData.serviceArea = propertyInfo.value.serviceArea || ''
    formData.serviceCommunityCount = propertyInfo.value.serviceCommunityCount || undefined
    formData.serviceHouseholdCount = propertyInfo.value.serviceHouseholdCount || undefined
    formData.serviceAreaSize = propertyInfo.value.serviceAreaSize || undefined
    
    
    // 支付信息
    formData.paymentAccount = propertyInfo.value.paymentAccount || ''
    formData.paymentBank = propertyInfo.value.paymentBank || ''
    formData.paymentLink = propertyInfo.value.paymentLink || ''
    formData.wechatPayMerchantId = propertyInfo.value.wechatPayMerchantId || ''
    formData.alipayMerchantId = propertyInfo.value.alipayMerchantId || ''
    
    // 图片信息
    formData.companyLogo = propertyInfo.value.companyLogo || ''
    formData.paymentQrCode = propertyInfo.value.paymentQrCode || ''
    
    // 描述信息
    formData.introduction = propertyInfo.value.introduction || ''
    formData.description = propertyInfo.value.description || ''
    formData.remark = propertyInfo.value.remark || ''
    
    // 初始化文件上传组件数据 - 只在非编辑模式下重置
    if (!isEditing.value) {
      try {
        // 处理公司Logo文件信息
        const logoFiles = getCompanyLogoFiles()
        companyLogoFiles.value = logoFiles.map((file: any) => ({
          id: file.id,
          url: file.fileUrl,
          fileUrl: file.fileUrl,
          fileName: file.fileName,
          fileSize: file.fileSize
        }))
        
        // 处理收款二维码文件信息
        const qrFiles = getPaymentQrCodeFiles()
        paymentQrCodeFiles.value = qrFiles.map((file: any) => ({
          id: file.id,
          url: file.fileUrl,
          fileUrl: file.fileUrl,
          fileName: file.fileName,
          fileSize: file.fileSize
        }))
      } catch (error) {
        console.error('初始化文件上传组件数据失败:', error)
        companyLogoFiles.value = []
        paymentQrCodeFiles.value = []
      }
    }
  }
}

/**
 * 处理编辑按钮点击
 */
const handleEdit = () => {
  if (!canEdit.value) {
    showWarning('您没有编辑权限')
    return
  }
  
  isEditing.value = true
  
  // 在编辑模式下初始化文件上传组件数据
  try {
    // 处理公司Logo文件信息
    const logoFiles = getCompanyLogoFiles()
    companyLogoFiles.value = logoFiles.map((file: any) => ({
      id: file.id,
      url: file.fileUrl,
      fileUrl: file.fileUrl,
      fileName: file.fileName,
      fileSize: file.fileSize
    }))
    
    // 处理收款二维码文件信息
    const qrFiles = getPaymentQrCodeFiles()
    paymentQrCodeFiles.value = qrFiles.map((file: any) => ({
      id: file.id,
      url: file.fileUrl,
      fileUrl: file.fileUrl,
      fileName: file.fileName,
      fileSize: file.fileSize
    }))
  } catch (error) {
    console.error('初始化文件上传组件数据失败:', error)
    companyLogoFiles.value = []
    paymentQrCodeFiles.value = []
  }
  
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

/**
 * 处理保存按钮点击
 */
const handleSave = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    saving.value = true
    
    // 构建保存数据
    const saveData = {
      // 基本信息
      companyName: formData.companyName,
      propertyCompanyId: formData.propertyCompanyId,
      creditCode: formData.creditCode,
      businessLicense: formData.businessLicense,
      legalRepresentative: formData.legalRepresentative,
      establishedDate: formData.establishedDate,
      registeredCapital: formData.registeredCapital,
      qualificationLevel: formData.qualificationLevel,
      
      // 联系信息
      contactPerson: formData.contactPerson,
      contactPhone: formData.contactPhone,
      contactEmail: formData.contactEmail,
      email: formData.email,
      address: formData.address,
      businessHours: formData.businessHours,
      serviceHotline: formData.serviceHotline,
      
      // 服务信息
      serviceScope: formData.serviceScope,
      serviceArea: formData.serviceArea,
      serviceCommunityCount: formData.serviceCommunityCount,
      serviceHouseholdCount: formData.serviceHouseholdCount,
      serviceAreaSize: formData.serviceAreaSize,
      
      
      // 支付信息
      paymentAccount: formData.paymentAccount,
      paymentBank: formData.paymentBank,
      paymentLink: formData.paymentLink,
      wechatPayMerchantId: formData.wechatPayMerchantId,
      alipayMerchantId: formData.alipayMerchantId,
      
              // 图片信息 - 转换为JSON字符串
      companyLogo: JSON.stringify(companyLogoFiles.value.map(f => ({
        id: f.id,
        fileName: f.fileName,
        fileUrl: f.fileUrl,
        fileSize: f.fileSize,
        uploadType: 'COMPANY_LOGO',
        uploadSource: 'WEB',
        status: 'success',
        createTime: new Date().toISOString(),
        fileType: 'image/jpeg',
        fileExtension: 'jpg',
        originalFileName: f.fileName,
        filePath: f.fileUrl
      }))),
      paymentQrCode: JSON.stringify(paymentQrCodeFiles.value.map(f => ({
        id: f.id,
        fileName: f.fileName,
        fileUrl: f.fileUrl,
        fileSize: f.fileSize,
        uploadType: 'PAYMENT_QR',
        uploadSource: 'WEB',
        status: 'success',
        createTime: new Date().toISOString(),
        fileType: 'image/jpeg',
        fileExtension: 'jpg',
        originalFileName: f.fileName,
        filePath: f.fileUrl
      }))),
      
      // 描述信息
      introduction: formData.introduction,
      description: formData.description,
      remark: formData.remark
    }
    
    const res = await propertyInfoApi.updateCurrentUserPropertyInfo(userStore.currentCompanyId, saveData)
    
    if (res.code === 200) {
      showSuccess('物业信息保存成功')
      isEditing.value = false
      // 重新加载数据
      await loadPropertyInfo()
      await loadPropertyStats()
      await loadOperationLogs()
    } else {
      showError(res.message || '保存失败')
    }
  } catch (error) {
    console.error('保存物业信息失败:', error)
    showError('保存失败，请检查表单数据')
  } finally {
    saving.value = false
  }
}

/**
 * 处理取消按钮点击
 */
const handleCancel = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要取消编辑吗？未保存的修改将丢失。',
      '确认取消',
      {
        confirmButtonText: '确定',
        cancelButtonText: '继续编辑',
        type: 'warning'
      }
    )
    
    isEditing.value = false
    // 重新加载数据，重置文件列表
    await loadPropertyInfo()
    await loadPropertyStats()
    await loadOperationLogs()
  } catch {
    // 用户选择继续编辑，不做任何操作
  }
}

/**
 * 处理刷新按钮点击
 */
const handleRefresh = async () => {
  try {
    // 重置状态
    hasPropertyCompany.value = null
    propertyInfo.value = undefined
    propertyStats.value = undefined
    operationLogs.value = []
    
    // 重新初始化数据
    await initPageData()
    showSuccess('数据已刷新')
  } catch (error) {
    console.error('刷新数据失败:', error)
    showError('刷新失败，请稍后重试')
  }
}

/**
 * 处理联系管理员
 */
const handleContactAdmin = () => {
  showInfo('请联系系统管理员为您分配物业公司')
}

/**
 * 格式化金额
 */
const formatMoney = (amount: number): string => {
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

/**
 * 格式化日期时间
 */
const formatDateTime = (dateTime: string): string => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

/**
 * 处理公司Logo上传成功
 */
const handleCompanyLogoSuccess = (response: any, file: any, fileList: ImageInfo[]) => {
  showSuccess('公司Logo上传成功')
}

/**
 * 处理收款二维码上传成功
 */
const handlePaymentQrCodeSuccess = (response: any, file: any, fileList: ImageInfo[]) => {
  showSuccess('收款二维码上传成功')
}

/**
 * 处理文件上传错误
 */
const handleUploadError = (error: any) => {
  showError(`文件上传失败: ${error.message}`)
}

/**
 * 处理物业公司切换
 */
const handleCompanyChange = async () => {
  console.log('物业公司已切换，当前ID:', userStore.currentCompanyId)
  // 切换后重新加载数据，确保显示当前物业公司的信息
  await initPageData()
  showSuccess('物业公司切换成功')
}

// ==================== 生命周期 ====================

onMounted(() => {
  initPageData()
})
</script>

<style scoped lang="scss">
.property-info-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  // 图片展示样式
  .image-gallery {
    .image-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
      position: relative;

      .gallery-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        border: 1px solid #e4e7ed;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }

      .image-more {
        width: 80px;
        height: 80px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(0, 0, 0, 0.8);
        }
      }

      .image-error {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f5f7fa;
        color: #909399;
        font-size: 12px;

        .el-icon {
          font-size: 20px;
          margin-bottom: 4px;
        }
      }
    }

    .image-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #909399;

      .image-count {
        font-weight: 500;
      }

      .image-tip {
        color: #409eff;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .no-data {
    color: #c0c4cc;
    font-style: italic;
  }

  .company-selector {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    
    .company-selector-content {
      .company-radio {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e9ecef;
        
        &:last-child {
          border-bottom: none;
        }
        
        .company-radio-content {
          display: flex;
          flex-direction: column;
          margin-left: 12px;
          flex: 1;
          
          .company-main-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            
            .company-name {
              font-weight: 600;
              color: #303133;
              font-size: 16px;
            }
            
            .company-id {
              font-size: 12px;
              color: #909399;
              background-color: #f0f0f0;
              padding: 2px 6px;
              border-radius: 4px;
            }
          }
          
          .company-info {
            font-size: 13px;
            color: #606266;
            
            .company-position {
              margin-right: 12px;
            }
            
            .company-department {
              margin-right: 12px;
            }
          }
        }
      }
    }
  }

  .page-header {
    margin-bottom: 20px;
    
    .breadcrumb {
      margin-bottom: 15px;
      font-size: 14px;
      color: #606266;
    }

    .page-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
  }

  .loading-container {
    padding: 40px;
    text-align: center;
  }



  .property-info-content {
    .info-card,
    .edit-card,
    .stats-card,
    .logs-card {
      margin-bottom: 20px;
      border-radius: 8px;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
    }

    .info-item {
      margin-bottom: 16px;
      
      .info-label {
        display: inline-block;
        width: 100px;
        color: #606266;
        font-weight: 500;
      }
      
      .info-value {
        color: #303133;
        word-break: break-all;
        
        .image-gallery {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
      }
      
      .introduction-text {
        white-space: pre-wrap;
        line-height: 1.6;
        color: #606266;
      }
    }

    .stat-item {
      text-align: center;
      padding: 20px;
      
      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #409eff;
        margin-bottom: 8px;
      }
      
      .stat-label {
        color: #909399;
        font-size: 14px;
      }
    }

    .log-item {
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .log-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        
        .log-action {
          font-weight: 500;
          color: #303133;
        }
        
        .log-time {
          color: #909399;
          font-size: 12px;
        }
      }
      
      .log-detail {
        color: #606266;
        font-size: 14px;
      }
    }
  }

  // 编辑表单样式
  .edit-card {
    .form-section {
      margin-bottom: 32px;
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 20px;
        padding-bottom: 8px;
        border-bottom: 2px solid #409eff;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 40px;
          height: 2px;
          background-color: #409eff;
        }
      }
    }

    .form-actions {
      text-align: center;
      padding-top: 24px;
      border-top: 1px solid #f0f0f0;
      margin-top: 32px;
      
      .el-button {
        margin: 0 8px;
        min-width: 100px;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .property-info-container {
      padding: 12px;
    }
    
    .page-actions {
      justify-content: center;
    }
    
    .info-item {
      .info-label {
        width: 80px;
        font-size: 14px;
      }
      
      .info-value {
        font-size: 14px;
      }
    }
    
    .stat-item {
      padding: 16px;
      
      .stat-value {
        font-size: 20px;
      }
      
      .stat-label {
        font-size: 12px;
      }
    }
  }
}
</style> 